<template>
  <div class="my">
    <div class="my-bg" :style="{ backgroundImage: `url(${userInfo.userBg})` }">
      <van-uploader v-if="isLogin" class="uploader-box" :after-read="upload" />
    </div>

    <div class="my-content">
      <div class="my-boxing">
        <div v-if="isLogin" class="my-box">
          <div class="my-img">
            <div class="img-box">
              <van-image
                round
                width="80"
                height="80"
                :src="userInfo.userImg"
                cover
              ></van-image>
              <van-uploader class="uploader-box" :after-read="uploadUserImg" />
            </div>
            <div class="my-info">
              <div class="nickname">{{ userInfo.nickName }}</div>
              <div class="desc">
                {{
                  userInfo.desc == ""
                    ? "这个家伙很懒,什么都没留下"
                    : userInfo.desc
                }}
              </div>
            </div>
          </div>
        </div>
        <div v-else class="not-login">
          <span @click="goLogin">未登录</span>
        </div>

        <div class="lists">
          <div class="lists-box">
            <van-cell
              :icon="item.iconName"
              :title="item.title"
              :to="item.to"
              size="large"
              is-link
              v-for="(item, index) in lists"
              :key="index"
            />
          </div>
          <!-- <div class="lists-box">
                <van-cell title="我的订单" size="large" is-link />
            </div>
            <div class="lists-box">
                <van-cell title="我的收藏" size="large" is-link />
            </div>
            <div class="lists-box">
                <van-cell title="收货地址" size="large" is-link /> 
            </div>
            <div class="lists-box">
                <van-cell title="安全中心" size="large" is-link />    
            </div> -->
        </div>

        <div class="my-imgbottom">
          <van-image
            width="100%"
            height="100%"
            :src="require('../../assets/images/timg1.jpg')"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/less/my.less";
import { utils } from "../../assets/js/utils";
export default {
  data() {
    return {
      lists: [
        {
          title: "个人资料",
          to: { name: "Account" },
          iconName: "user-circle-o",
        },
        { title: "我的订单", to: { name: "Order" }, iconName: "like-o" },
        { title: "我的收藏", to: { name: "Like" }, iconName: "cart-o" },
        { title: "收货地址", to: { name: "Address" }, iconName: "location-o" },
        {
          title: "安全中心",
          to: { name: "Secure" },
          iconName: "goods-collect-o",
        },
      ],
      isLogin: false,
      userInfo: {},
      maxSize: 1 * 1024 * 1024,
    };
  },

  created() {
    //查询用户信息
    this.getUserInfo();
  },

  methods: {
    // afterRead(file) {
    //   // 此时可以自行将文件上传至服务器
    //   console.log(file);
    // },

    goLogin() {
      this.$router.push({ name: "Login" });
    },

    //查询用户信息
    getUserInfo() {
      //获取token字符串
      let tokenString = localStorage.getItem("CSTK");
      if (!tokenString) {
        return;
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
        loadingType: "spinner",
      });

      this.axios({
        method: "GET",
        url: "/findMy",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((result) => {
          this.$toast.clear();
          console.log("地址 result ==> ", result);
          if (result.data.code == "A001") {
            if (result.data.result.length > 0) {
              this.isLogin = true;

              this.userInfo = result.data.result[0];
              // this.userInfo.name = result.data.result[0].name;
              // this.userInfo.userBg = result.data.result[0].userBg;
              // this.userInfo.nickName = result.data.result[0].nickName;
              // this.userInfo.desc = result.data.result[0].desc;
            }
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },

    //上传背景
    upload(file) {
      //获取token字符串
      let tokenString = localStorage.getItem("CSTK");
      if (!tokenString) {
        return;
      }
      // console.log("file ==> ", file);

      // console.log(file.file.type.split("/")[1])
      //获取文件类型
      let type = file.file.type.split("/")[1];
      let imgTypes = ["png", "gif", "jpg", "jpeg"];

      // 图片类型
      if (imgTypes.indexOf(type) === -1) {
        this.$notify({
          message: "图片类型只支持" + imgTypes.join(","),
          color: "#fff",
          background: "#0C34BA",
        });

        return;
      }
      //图片大小
      if (this.maxSize < file.file.size) {
        this.$notify({
          message: "上传文件大小不能超过" + this.maxSize / 1024 + "KB",
          color: "#fff",
          background: "#0C34BA",
        });
        return;
      }
      console.log("file ==> ", file);

      //获取base64
      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

      // 参数序列化
      let data = utils.queryString({
        appkey: this.appkey,
        tokenString,
        imgType: type,
        serverBase64Img: base64,
      });

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
        loadingType: "spinner",
      });

      this.axios({
        method: "POST",
        url: "/updateUserBg",
        data,
      })
        .then((result) => {
          this.$toast.clear();
          console.log("地址 result ==> ", result);
          if (result.data.code == "I001") {
            this.userInfo.userBg = result.data.userBg;
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },

    //上传头像
    uploadUserImg(file) {
      //获取token字符串
      let tokenString = localStorage.getItem("CSTK");
      if (!tokenString) {
        return;
      }

      //获取文件类型
      let type = file.file.type.split("/")[1];
      let imgTypes = ["png", "gif", "jpg", "jpeg"];

      if (imgTypes.indexOf(type) === -1) {
        this.$notify({
          message: "图片类型只支持" + imgTypes.join(","),
          color: "#fff",
          background: "#0C34BA",
        });

        return;
      }

      //图片大小
      if (this.maxSize < file.file.size) {
        this.$notify({
          message: "上传文件大小不能超过" + this.maxSize / 1024 + "KB",
          color: "#fff",
          background: "#0C34BA",
        });
        return;
      }

      //获取base64
      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

      //参数序列化
      let data = utils.queryString({
        appkey: this.appkey,
        tokenString,
        imgTypes: type,
        serverBase64Img: base64,
      });

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
        loadingType: "spinner",
      });

      this.axios({
        method: "POST",
        url: "/updateAvatar",
        data,
      })
        .then((result) => {
          this.$toast.clear();
          console.log(" result ==> ", result);
          if (result.data.code == "H001") {
            this.userInfo.userImg = result.data.userImg;
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>
